import React, { Component } from "react";
import { Icon, Card, Statistic, DatePicker, Timeline, Row, Col } from "antd";
import moment from "moment";
import Bar from "./bar";
import "./home.less";
const dateFormat = "YYYY/MM/DD";
const { RangePicker } = DatePicker;
export default class Home extends Component {
  state = {};
  handleChange = (isVisited) => {
    return () => this.setState({ isVisited });
  };
  render() {
    return (
      <div className="home">
        <Card
          className="home-card"
          title="资产汇总信息栏"
          extra={
            <Icon style={{ color: "rgba(0,0,0,.45)" }} type="question-circle" />
          }
          style={{ width: 760 }}
        >
          <Row gutter={12}>
            <Col span={6}>
              <Statistic
                title="设备总数"
                value={112893}
                style={{
                  background: "#6bd1dd",
                  textAlign: "center",
                  height: 100,
                  lineHeight: "40px",
                }}
              />
            </Col>
            <Col span={6}>
              <Statistic
                title="风险总数"
                value={112893}
                style={{
                  textAlign: "center",
                  background: "#11cd6e",
                  height: 100,
                  lineHeight: "40px",
                }}
              />
            </Col>
            <Col span={6}>
              <Statistic
                title="安全设备数"
                value={112893}
                style={{
                  textAlign: "center",
                  background: "#f4c600",
                  height: 100,
                  lineHeight: "40px",
                }}
              />
            </Col>
            <Col span={6}>
              <Statistic
                title="分类统计图"
                value={112893}
                style={{
                  background: "#00bb9c",
                  textAlign: "center",
                  height: 100,
                  lineHeight: "40px",
                }}
              />
            </Col>
          </Row>
        </Card>

        <Card
          className="home-card"
          title="安全风险"
          extra={
            <Icon style={{ color: "rgba(0,0,0,.45)" }} type="question-circle" />
          }
          style={{ width: 400, marginLeft: 50, height: "205px" }}
          headStyle={{ color: "rgba(0,0,0,.45)" }}
        >
          <Row gutter={20}>
            <Col span={12}>
              <Statistic
                title="待处理警告"
                value={11}
                valueStyle={{ color: "#3f8600" }}
                suffix=""
                style={{
                  background: "#6bd1dd",
                  textAlign: "center",
                  height: 100,
                  lineHeight: "40px",
                }}
              />
            </Col>
            <Col span={12}>
              <Statistic
                title="待修复漏洞"
                value={9}
                valueStyle={{ color: "#cf1322" }}
                style={{
                  background: "#00bb9c",
                  textAlign: "center",
                  height: 100,
                  lineHeight: "40px",
                }}
              />
            </Col>
          </Row>
        </Card>
        <Card
          className="home-content"
          title={
            <div className="home-menu">
              <span onClick={this.handleChange(true)}>安全运营</span>
            </div>
          }
          extra={
            <RangePicker
              defaultValue={[
                moment("2019/01/01", dateFormat),
                moment("2019/06/01", dateFormat),
              ]}
              format={dateFormat}
            />
          }
        >
          <Card
            className="home-table-left"
            bodyStyle={{ padding: 0, height: 275 }}
            extra={<Icon type="reload" />}
          >
            <Bar />
          </Card>
          <Card
            title="任务"
            extra={<Icon type="reload" />}
            className="home-table-right"
          >
            <Timeline>
              <Timeline.Item color="green">新版本迭代</Timeline.Item>
              <Timeline.Item color="green">完成网站设计初版</Timeline.Item>
              <Timeline.Item color="red">联调接口</Timeline.Item>
              <Timeline.Item color="red">功能验收</Timeline.Item>
              <Timeline.Item color="red">登录功能设计</Timeline.Item>
              <Timeline.Item color="red">权限验证</Timeline.Item>
              <Timeline.Item color="red">页面排版</Timeline.Item>
            </Timeline>
          </Card>
        </Card>
      </div>
    );
  }
}
